<template>
  <div class="home">
    <company-home-content-layout>
      <template v-slot:menu>
        <menu-a :id="companyId" @getSelectId="seeProduct" />
      </template>
      <template>
        <div class="home-content">
          <div class="info-and-advisory">
            <div class="info">
              <p class="title">企业简介</p>
              <div class="pic"><img v-if="info.merchant" :src="info.merchant.mer_avatar" class="objectCover" alt="" /></div>
              <div class="text">{{ info.merchant && info.merchant.mer_info }}</div>
              <div class="more">
                <router-link :to="{ path: '/company-home/intro/' + companyId }">
                  了解更多
                  <img src="~/assets/images/modo.png" />
                </router-link>
              </div>
            </div>
            <div class="advisory">
              <div class="title-and-more">
                <p class="title">企业资讯</p>
                <div class="more">
                  <router-link :to="{ name: 'CompanyHomeNews', params: { id: $route.params.id } }">
                    查看更多
                    <img src="~/assets/images/modo.png" />
                  </router-link>
                </div>
              </div>
              <div class="list">
                <router-link class="item" v-for="(item, index) in info.article" :key="index" :to="{ path: '/company-home/news/details/' + item.article_id + '/' + companyId }">
                  <div class="pic"><img :src="item.image_input" class="objectCover" /></div>
                  <div class="title-and-time">
                    <p class="title">{{ item.title }}</p>
                    <p class="time">{{ item.create_time }}</p>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
          <!-- 新品推荐 -->
          <div class="turn-page-title">
            <p class="title">新品推荐</p>
            <div class="line"></div>
            <div class="btns newProducts">
              <div class="prev"><img src="~/assets/images/left.png" alt="" /></div>
              <div class="next"><img src="~/assets/images/right.png" alt="" /></div>
            </div>
          </div>
          <swiper class="swiper new-swiper" :options="panelSwiper">
            <swiper-slide class="item" v-for="(item, index) in info.new_product" :key="index">
              <div class="new-recommend-list list">
                <div class="pic">
                  <img :src="item.image" alt="">
                </div>
                <div class="title">
                  {{ item.store_name}}
                </div>
                <div class="price-and-collect">
                  <div class="price">
                    <span class="keywords">￥{{ item.price }}/Pc</span>
                    起
                  </div>
                  <!-- //todo -->
                  <div class="collect" @click.prevent.stop="collect(item.product_id)">
                    <img src="~/assets/images/collect-grey.png" alt="" />
                  </div>
                </div>
                <div class="storage-and-cart">
                  <div class="storage">
                    <span class="keywords">{{ item.moq }}Pcs</span>
                    MOQ
                  </div>
                  <div class="cart" @click.prevent.stop="joinCart(item.product_id)">
                    <img src="~/assets/images/cart-grey.png" alt="" />
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
          <!-- 商家精选 -->
          <div class="turn-page-title">
            <p class="title">商家精选</p>
            <div class="line"></div>
            <div class="btns hotProducts">
              <div class="prev"><img src="~/assets/images/left.png" alt="" /></div>
              <div class="next"><img src="~/assets/images/right.png" alt="" /></div>
            </div>
          </div>
          <swiper class="swiper new-swiper" :options="panelSwiper2">
            <swiper-slide class="item" v-for="(item, index) in info.best_product" :key="index">
              <div class="new-recommend-list list">
                <div class="pic">
                  <img :src="item.image" alt="">
                </div>
                <div class="title">
                  {{item.store_name}}
                </div>
                <div class="price-and-collect">
                  <div class="price">
                    <span class="keywords">￥{{ item.price }}/Pc</span>
                    起
                  </div>
                  <div class="collect" @click.prevent.stop="collect(item.product_id)">
                    <img src="~/assets/images/collect-grey.png" alt="" />
                    <img src="~/assets/images/collect-iscot.png" alt="" />
                  </div>
                </div>
                <div class="storage-and-cart">
                  <div class="storage">
                    <span class="keywords">{{item.moq}}Pcs</span>
                    MOQ
                  </div>
                  <div class="cart" @click.prevent.stop="joinCart(item.product_id)">
                    <img src="~/assets/images/cart-grey.png" alt="" />
                  </div>
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </template>
    </company-home-content-layout>
    <div class="container">
      <!-- 企业相册 -->
      <div class="product-album">
        <p class="title">企业相册</p>
        <div class="line"></div>
      </div>
      <div class="album-list" ref="albumList">
        <div class="item" v-for="(item, index) in info.company_photo" :key="index" @click="showCarouselTc(index)">
          <div class="mask">
            <span class="name">{{ item.mer_name }}</span>
          </div>
          <div class="pic"><img :src="item.image" class="objectCover" /></div>
          <div class="bottom">{{ item.mer_name }}</div>
        </div>
        <div class="carousel" v-show="showCarousel" :style="{ left }"><m-carousel height="350px" :imgs="carouselPic" :title="carouselName" @close="showCarousel = false" /></div>
      </div>
      <!-- 给企业留言 -->
      <div class="leave-message">
        <img src="~/assets/images/leave-message.png" alt="" />
        给企业留言
      </div>
      <div class="form-wrap">
        <m-form ref="form" :model="formData" :rules="rules" label-width="110px" label-position="left">
          <m-form-item prop="realname" label="姓名："><m-input v-model="formData.realname" style="width: 45%; display: inline-block" /></m-form-item>
          <m-form-item prop="contact" label="联系电话："><m-input v-model="formData.contact" style="width: 45%; display: inline-block" /></m-form-item>
          <m-form-item prop="email" label="邮箱："><m-input v-model="formData.email" style="width: 45%; display: inline-block" /></m-form-item>
          <m-form-item prop="content" label="留言内容：">
            <m-input v-model="formData.content" type="textarea" :autosize="{ minRows: 8 }" maxlength="500" show-word-limit style="width: 70%; display: inline-block" />
          </m-form-item>
          <m-form-item>
            <m-checkbox v-model="formData.mobile_type">
              <div style="display: flex; align-items: center; font-size: 16px">
                我同意发送我的联系方式给该企业
                <Tooltip content="勾选此项，则平台会发送您的联系方式给该企业，否则系统只提供您的姓名、公司、邮箱信息。" placement="right">
                  <img src="~/assets/images/icon-remarks.png" alt="" style="margin-left: 10px; margin-bottom: 2px" />
                </Tooltip>
              </div>
            </m-checkbox>
          </m-form-item>
          <m-form-item><m-button width="235" @click="submit" class="subBtn">提交</m-button></m-form-item>
        </m-form>
      </div>
    </div>
  </div>
</template>

<script>
import CompanyHomeContentLayout from '@/components/common/company-home-content-layout/company-home-content-layout';
import MenuA from '@/views/company-home/children/MenuA';
import MForm from '@/components/common/m-form/MForm';
import MFormItem from '@/components/common/m-form/MFormItem';
import MInput from '@/components/common/m-input/MInput';
import MCheckbox from '@/components/common/m-checkbox/MCheckbox';
import MButton from '@/components/common/m-button/MButton';
import MCarousel from '@/components/common/m-carousel/MCarousel';
import { Tooltip } from 'element-ui';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
import { getMerchantHome, postMessageMer, collectPro, addCart } from '@/request/api';

export default {
  name: 'Home',
  components: {
    MCarousel,
    MButton,
    MCheckbox,
    MInput,
    MFormItem,
    MForm,
    MenuA,
    CompanyHomeContentLayout,
    Tooltip,
    swiper,
    swiperSlide
  },
  data() {
    return {
      companyId: '',
      info: {
        merchant: ''
      },
      carouselPic: [],
      carouselName: '',
      panelSwiper: {
        slidesPerView: 4,
        slidesPerColumn: 2,
        slidesPerGroup: 8,
        navigation: {
          nextEl: '.newProducts .next',
          prevEl: '.newProducts .prev',
          disabledClass: 'my-button-disabled',
          hiddenClass: 'my-button-hidden'
        },
        observer: true
      },
      panelSwiper2: {
        slidesPerView: 4,
        slidesPerColumn: 2,
        slidesPerGroup: 8,
        navigation: {
          nextEl: '.hotProducts .next',
          prevEl: '.hotProducts .prev',
          disabledClass: 'my-button-disabled',
          hiddenClass: 'my-button-hidden'
        },
        observer: true
      },
      showCarousel: false,
      left: '',
      formData: {},
      rules: {
        realname: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        contact: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        email: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        content: [{ required: true, message: '请输入完整', trigger: 'blur' }]
      }
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.hasLogin;
    }
  },
  created() {
    this.companyId = this.$route.params.id;
    this.$nextTick(() => {
      this.info = JSON.parse(localStorage.getItem('merchantInfo'));
    });
  },
  methods: {
    submit() {
      const that = this;
      this.$refs.form.$refs.mForm.validate(res => {
        if (!res) return false;
        this.$toastVant.loading('提交中');
        postMessageMer(this.formData)
          .then(r => {
            that.$toastVant.success(r.message || '提交成功！');
            that.formData = {};
          })
          .catch(err => {
            that.$toastVant.fail(err.message);
          });
      });
    },
    getInfo() {
      getMerchantHome(this.companyId)
        .then(res => {
          this.info = res.data;
        })
        .catch(() => {
          this.$message.error('该企业暂未入驻!');
        });
    },
    showCarouselTc(index) {
      this.carouselPic = this.info.company_photo[index].images;
      this.carouselName = this.info.company_photo[index].mer_name;
      this.showCarousel = true;
      this.setWidth();
    },
    setWidth() {
      this.left = '-' + this.$refs.albumList.getBoundingClientRect().left + 'px';
    },
    seeProduct(id) {
      this.$router.push({
        path: '/company-home/product/' + this.companyId + '?cid=' + id
      });
    },
    /** 收藏产品 */
    collect(id) {
      let that = this;
      if (!this.$store.state.access_token) {
        Toast({
          message: '登录后才可使用收藏和购物车功能！',
          duration: 3000,
          forbidClick: true
        });
        this.$router.push({ name: 'Login' });
      } else {
        let data = {
          type_id: id,
          type: 1
        };
        collectPro(data)
          .then(res => {
            if (res.status === 200) {
              that.$toastVant.success(res.message);
            }
          })
          .catch(err => {
            that.$message.error(err.message);
          });
      }
    },
    /** 加入购物车 */
    joinCart(id) {
      if (!this.$store.state.access_token) {
        Toast({
          message: '登录后才可使用收藏和购物车功能！',
          duration: 3000,
          forbidClick: true
        });
        this.$router.push({ name: 'Login' });
      } else {
        let data = {
          cart_num: 1,
          is_new: 0,
          product_id: id,
          product_type: 0
        };
        addCart(data)
          .then(res => {
            if (res.status === 200) {
              this.$toastVant.success('加入成功!');
            }
          })
          .catch(err => {
            this.$message.error(err.message);
          });
      }
    },
  }
};
</script>

<style lang="scss" scoped>
@import '~@/assets/style/common.scss';

/deep/ .carousel {
  z-index: 99 !important;
}

.home {
  .container {
    width: 1200px;
    margin: 0 auto;
  }

  .home-content {
    font-size: 18px;
    color: #666;

    .info-and-advisory {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;

      .info {
        margin-left: 12px;
        width: 585px;
        padding: 20px 15px;
        background-color: #fff;

        .title {
          margin-bottom: 15px;
        }

        .pic {
          height: 200px;
          background-color: pink;
          margin-bottom: 15px;
        }

        .text {
          @include text-omitted(2);
          font-size: 16px;
          margin-bottom: 15px;
        }

        .more {
          text-align: right;
          font-size: 16px;
          color: $theme-color-1;
        }
      }

      .advisory {
        width: 370px;
        padding: 20px 15px;
        background-color: #fff;

        .title-and-more {
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;

          .more {
            font-size: 16px;
            color: $theme-color-1;
          }
        }

        .list {
          .item {
            height: 77px;
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            box-sizing: content-box;

            &:not(:last-of-type) {
              border-bottom: solid 1px #ccc;
            }

            .pic {
              width: 121px;
              height: 100%;
              background-color: pink;
            }

            .title-and-time {
              display: flex;
              flex-direction: column;
              justify-content: space-around;

              .title {
                margin-left: 10px;
                width: 250px;
                font-size: 16px;
                @include text-omitted(2);
                margin-bottom: 15px;
              }

              .time {
                font-size: 14px;
                color: #969696;
                text-align: right;
              }
            }
          }
        }
      }
    }

    .turn-page-title {
      border-left: solid 3px #000;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 10px;
      margin-bottom: 30px;

      .title {
        width: 90px;
        font-size: 20px;
        color: #000;
      }

      .line {
        width: calc(100% - 90px - 80px - 20px);
        height: 6px;
        background-color: rgb(220, 221, 226);
      }

      .btns {
        width: 75px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        div {
          width: 31px;
          height: 31px;
          border-radius: 31px;
          background-color: $theme-color-1;
          color: #fff;
          font-size: 20px;
          line-height: 31px;
          text-align: center;
          cursor: pointer;
        }

        div:focus {
          outline: none;
        }
      }
    }

    > .list {
      margin: -10px;
      margin-bottom: 50px;

      .item {
        background-color: #fff;
        width: calc((100% - 80px) / 4);
        height: 398px;
        padding: 10px;
        display: inline-block;
        margin: 10px;

        .pic {
          height: 250px;
          background-color: #ccc;
          margin-bottom: 15px;
        }

        .title {
          @include text-omitted(2);
          margin-bottom: 15px;
        }

        .price-and-collect {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          margin-bottom: 10px;

          .price {
            font-size: 14px;

            .keywords {
              color: $theme-color-1;
              font-size: 18px;
              margin-right: 5px;
              font-weight: bold;
            }
          }

          img {
            cursor: pointer;
          }
        }

        .storage-and-cart {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;

          .storage {
            font-size: 14px;

            .keywords {
              color: $theme-color-1;
              font-size: 18px;
              margin-right: 5px;
              font-weight: bold;
            }
          }

          img {
            cursor: pointer;
          }
        }
      }
    }
  }

  .product-album {
    border-left: solid 3px #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    margin-bottom: 30px;

    .title {
      width: 90px;
      font-size: 20px;
      color: #000;
    }

    .line {
      width: calc(100% - 90px - 20px);
      height: 6px;
      background-color: rgb(220, 221, 226);
    }
  }

  .album-list {
    margin: -10px;
    margin-bottom: 50px;
    position: relative;

    .item {
      width: calc((100% - 80px) / 4);
      height: 278px;
      background-color: #fff;
      margin: 10px;
      display: inline-block;
      position: relative;
      cursor: pointer;

      &:hover {
        .mask {
          visibility: visible;
        }
      }

      .mask {
        height: 221px;
        background-color: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: hidden;

        .name {
          color: #fff;
          width: 90%;
          height: 85%;
          border: dashed 1px #fff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .pic {
        height: 221px;
        background-color: pink;
      }

      .bottom {
        height: 278px - 221px;
        line-height: 278px - 221px;
        text-align: center;
        font-size: 16px;
      }
    }

    .carousel {
      width: 99vw;
      height: 500px;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: -35%;
      left: 0;
    }
  }

  .leave-message {
    font-size: 20px;
    color: #000;
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    img {
      margin-right: 10px;
    }
  }

  .form-wrap {
    background-color: #fff;
    padding: 30px 20px;

    .subBtn {
      margin-left: 248px;
    }
  }
}

.new-swiper {
  margin-bottom: 30px;

  .item {
    background-color: #fff;
    width: 225px !important;
    height: 398px;
    padding: 10px;
    display: inline-block;
    margin: 10px;
  }

  .pic {
    height: 250px;
    background-color: #ccc;
    margin-bottom: 15px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 15px;
  }

  .price-and-collect {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;

    .price {
      font-size: 14px;

      .keywords {
        color: $theme-color-1;
        font-size: 18px;
        margin-right: 5px;
        font-weight: bold;
      }
    }

    img {
      cursor: pointer;
    }
  }

  .storage-and-cart {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .storage {
      font-size: 14px;

      .keywords {
        color: $theme-color-1;
        font-size: 18px;
        margin-right: 5px;
        font-weight: bold;
      }
    }

    img {
      cursor: pointer;
    }
  }
}
</style>
